<template>
  <div
    :style="{ opacity: opacity }"
    @touchstart="_touchStart"
    @touchend="_touchEnd"
  >
    <slot></slot>
  </div>
</template>

<script lang="ts">
export default {
  name: "hover",
};
</script>
<script lang="ts" setup>
import { ref } from "vue";

const opacity = ref<number>(1);

const _touchStart = () => {
  opacity.value = 0.6;
};
const _touchEnd = () => {
  setTimeout(() => {
    opacity.value = 1;
  }, 100);
};
</script>

<style>
</style>
